/* eslint-disable no-trailing-spaces,import/newline-after-import,key-spacing,react/jsx-indent-props,no-undef,padded-blocks,react/forbid-prop-types,quotes,react/no-unused-state,react/jsx-first-prop-new-line,spaced-comment */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles} from 'material-ui/styles';
import Input, {InputLabel} from 'material-ui/Input';
import LoginCard from './LoginCard';

import Card, {CardActions, CardContent} from 'material-ui/Card';
import {DialogActions} from 'material-ui/Dialog';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
import Avatar from 'material-ui/Avatar';
import TextField from 'material-ui/TextField';
import {FormControl, FormHelperText} from 'material-ui/Form';
import {GetRandomUserName} from './common/Util';

const styles = theme => ({
    loginContainer: {
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: '#E7E7E7',
        alignItems: 'center',
    },

    loginCard: {
        width: 400,
        alignItems: 'center',
        justifyContent: 'center',
    },

    loginTitle: {
        marginBottom: 16,
        fontSize: 24,
        color: theme.palette.text.black,
        alignItems: 'center',
        textAlign: 'center',
    },
    pos: {
        marginBottom: 12,
        color: theme.palette.text.secondary,
    },
    avatarDiv: {
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex',
        padding: 5,
    },

    bigAvatar: {
        width: 60,
        height: 60,
        alignItems: 'center',
    },
    inputHelper: {
        marginTop: 20,
    },
    textField: {
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit,

    },
    actionDiv: {
        display: 'flex',
        justifyContent: 'space-between',
    },
});

class Login extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            winH: 50,
            connectUrl: 'localhost:4001',
            yourName: GetRandomUserName(),
        };
    }

    componentWillMount() {
        this.setState({
            winH: window.innerHeight,
        });
    }

    componentDidMount() {
        window.addEventListener('resize', this.onWindowResize);
        console.log(this.state.yourName);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize);
    }

    onWindowResize = (e) => {
        const lh = e.target.innerHeight;
        this.setState({
            winH: lh,
        });
    };

    changeYourName = () => {
        this.setState({
            yourName: GetRandomUserName(),
        });
    };

    doLogin = () => {

    };

    handleInputChange = (event) => {
        this.setState({yourName: event.target.value});
    };

    render() {
        console.log(this.state.winH);
        const {classes, theme} = this.props;
        return (
            <div className={[classes.loginContainer]}
                 style={{height: this.state.winH}}>

                <Card className={classes.loginCard}>
                    <CardContent>

                        <Typography type="body1" className={classes.loginTitle}>
                            登录
                        </Typography>

                        <div className={classes.avatarDiv}>
                            <Avatar alt="头像"
                                    src="http://img4.imgtn.bdimg.com/it/u=2770691011,100164542&fm=214&gp=0.jpg"
                                    className={classes.bigAvatar}/>
                        </div>
                        <div>
                            <FormControl fullWidth disabled className={classes.inputHelper}>
                                <InputLabel htmlFor="name-disabled">连接地址</InputLabel>
                                <Input
                                    value={this.state.connectUrl}
                                    id="address"
                                    className={classes.textField}
                                    type="text"
                                />
                            </FormControl>

                            <FormControl fullWidth className={classes.inputHelper}>
                                <InputLabel htmlFor="name-disabled">你的名字</InputLabel>
                                <Input
                                    value={this.state.yourName}
                                    id="userName"
                                    className={classes.textField}
                                    type="text"
                                    onChange={this.handleInputChange}
                                />
                            </FormControl>


                        </div>
                    </CardContent>
                    <div className={classes.actionDiv}>
                        <CardActions>
                            <Button onClick={this.changeYourName}>换名</Button>
                        </CardActions>
                        <CardActions style={{justifyContent: ''}}>
                            <Button onClick={this.doLogin}>登录</Button>
                        </CardActions>
                    </div>
                </Card>

            </div>
        );
    }


}

Login.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};


export default withStyles(styles, {withTheme: true})(Login);
